import { useState } from "react";

import jsonArticleBodyHomePage from '../../axios/ArticleBodyHomePage.json'
// 导航栏
function Navbar() {
  // 下拉框显示
  const [show, setShow] = useState(false);
  // 导航栏显示
  const [navbarShow, setNavbarShow] = useState(false);
  //搜索框热搜显示
  let [isShowCheckBox, setIsShowCheckBox] = useState(false);
  let [isShowCheckBoxDropdown, setIsShowCheckBoxDropdown] = useState(false);
  return (
    <div className="container" style={{ width: 100 + "%", height: 80 + "px" }}>
      <nav className="navbar fixed-top navbar-expand-lg navbar-light bg-light ">
        <img src="/favicon.ico" alt="..." />
        <a className="navbar-brand" href="/">导航栏</a>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onClick={() => setNavbarShow(!navbarShow)}>
          <span className="navbar-toggler-icon"></span>
        </button>

        <div className={"collapse navbar-collapse " + (navbarShow ? "show" : "")} id="navbarSupportedContent" >
          <ul className="navbar-nav mr-auto" >
            <li className="nav-item active"><a className="nav-link" href="/">首页 <span className="sr-only"></span></a></li>
            <li className="nav-item"><a className="nav-link" href="/Article">问答 </a></li>
            <li className="nav-item"><a className="nav-link" href="/Community">社区  </a></li>
            <li className="nav-item"><a className="nav-link" href="/SuperClub">超级社团 </a></li>
            <li className="nav-item"><a className="nav-link" href="/Money">余额充值 </a></li>
            <li className="nav-item dropdown">
              <span className="nav-link dropdown-toggle" onClick={() => setShow(!show)} role="button" data-toggle="dropdown" aria-expanded="false" >
                发现
              </span>
              {/* <div className="dropdown-menu "> */}
              <div className={"dropdown-menu " + (show ? "show" : "")}>
                <a className="dropdown-item" href="/RankingList">排行榜</a>
                <a className="dropdown-item" href="/Comment">评论区</a>
                <div className="dropdown-divider"></div>
                <a className="dropdown-item" href="/Html/RYQC00001">知识库</a>
                <a className="dropdown-item" href="/Html/PJB000001">会员充值</a>
              </div>
            </li>
          </ul>
          <div>
            <form className="form-inline my-2 my-lg-0" >
              {/* onPressEnter: 回车键触发事件； onBlur:失去焦点触发事件； onFocus:获得焦点触发事件 */}
              <input className="form-control mr-sm-2" type="search" placeholder="搜索框" aria-label="Search"
                //  onPressEnter={isShowCheckBox:true}         
                //获取焦点显示热搜
                onFocus={() => { setIsShowCheckBox(isShowCheckBox = true); }}
                //失去焦点隐藏热搜(目前无法使用a标签跳转)
                onBlur={() => setIsShowCheckBox(isShowCheckBox = false)}
              />
            </form>
            {/* 用mouseleave/mouseenter代替mouseover/mouseout【最佳方法】mouseover 与 mouseenter:
            mouseover => 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
            mouseenter => 只有在鼠标指针从元素外穿入被选元素（到元素内）时，才会触发 mouseenter 事件。
            mouseout 与 mouseleave:
            mouseout => 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
            mouseleave => 只有在鼠标指针从元素内穿出被选元素（到元素外）时，才会触发 mouseleave 事件。 */}
            <div className={"dropdown-menu " + (isShowCheckBox || isShowCheckBoxDropdown ? "show" : "")}>
              <table className="table table-hover p-3 mb-2 bg-primary text-white"
                // 鼠标移入事件
                onMouseEnter={() => { console.log("鼠标进入了", isShowCheckBoxDropdown); setIsShowCheckBoxDropdown(isShowCheckBoxDropdown = true); }}
                // 鼠标移出事件
                onMouseLeave={() => { console.log("鼠标离开了", isShowCheckBoxDropdown); setIsShowCheckBoxDropdown(isShowCheckBoxDropdown = false) }}>
                <tbody className='p-3 mb-2 bg-white text-dark'>
                  {/* 显示遍历推荐文章的列表 */}
                  {jsonArticleBodyHomePage.data.map(
                    (item, index) => <tr><a className="list-group-item list-group-item-action" href={`/ArticleContent/${item.titleID}`} >
                      <th scope="row">{//前三名特有的序号图片
                        index + 1 === 1 ? <img src="/img/rank1.png" style={{ width: 28, height: 35 }} alt="..." ></img> :
                          index + 1 === 2 ? <img src="/img/rank2.png" style={{ width: 24, height: 30 }} alt="..." ></img> :
                            index + 1 === 3 ? <img src="/img/rank3.png" style={{ width: 24, height: 30 }} alt="..." ></img> :
                              (index + 1) + "."
                      }</th>
                      <td className={index + 1 === 1 ? "h4" : index + 1 === 2 || index + 1 === 3 ? "h5" : "h6"} >{item.title}</td>
                      <td className="text-black-50"><i>{item.titleBlurb}</i></td>
                    </a></tr>)}
                </tbody>
              </table>
            </div>
          </div>
          <button className="btn btn-outline-success my-2 my-sm-0" type="submit" >
            <a className="list-group-item list-group-item-action" href="#">搜索</a></button>
          <button className="btn  my-2 my-sm-0" style={{ position: 'absolute', right: '0' }}>
            <a className="nav-link" href="/login">{1 ? "登录 / 注册" : "admin"} </a>
          </button>
          {/* <ul className="navbar-nav mr-auto" > */}
          {/* <li className="nav-item" style={{ position: 'absolute', right: '0' }}><a className="nav-link" href="/login">登录|注册 </a></li> */}
          {/* </ul> */}
        </div>
      </nav >
    </div >
  );
}

export default Navbar;

